<template>
  <!------------------------- 底部数字键盘 ------------------------->
  <!---------    说明
      数字键盘
      props：
        price      ———— 输入框金额
      method：
        changeNum     ———— 修改金额
        confirmEvent  ———— 确认付款
   -->
  <div class="fixed-bottom">
    <div class="keyboard" @click.stop="_handleKeyPress">
      <div class="key-row">
        <div class="key-cell" data-num="1">1</div>
        <div class="key-cell" data-num="2">2</div>
        <div class="key-cell" data-num="3">3</div>
        <div class="key-cell" data-num="D">
          <span data-num="D">
            <img src="@/assets/images/deleteNum.png" data-num="D" alt="">
          </span>
        </div>
      </div>
      <div class="key-row">
        <div class="key-cell" data-num="4">4</div>
        <div class="key-cell" data-num="5">5</div>
        <div class="key-cell" data-num="6">6</div>
        <div class="key-cell" data-num="-1" />
      </div>
      <div class="key-row">
        <div class="key-cell" data-num="7">7</div>
        <div class="key-cell" data-num="8">8</div>
        <div class="key-cell" data-num="9">9</div>
        <div class="key-cell" data-num="-1" />
      </div>
      <div class="key-row">
        <div class="key-cell double-cell" data-num="0">0</div>
        <div class="key-cell" data-num=".">.</div>
        <div class="key-cell" data-num="-1" />
      </div>
      <div class="key-confirm" data-num="S">付款</div>
    </div>
  </div>
</template>

<script>

export default {
  name: 'Keyborad',
  components: {
  },
  props: {
    price: {
      type: String,
      required: false,
      default: ''
    }
  },
  data() {
    return {
      money: ''
    }
  },
  watch: {
    price(newVal) {
      this.money = newVal
    }
  },
  mounted() {
    this.money = this.price
  },
  methods: {
    _handleKeyPress(e) {
      const num = e.target.dataset.num
      // 不同按键处理逻辑
      // -1,undefined 代表无效按键，直接返回
      if (num === -1) return false
      if (num === undefined) return false
      switch (String(num)) {
        // 小数点
        case '.':
          this._handleDecimalPoint()
          break
          // 删除键
        case 'D':
          this._handleDeleteKey()
          break
          // 清空键
        case 'C':
          this._handleClearKey()
          break
          // 确认键
        case 'S':
          this._handleConfirmKey()
          break
        default:
          this._handleNumberKey(num)
          break
      }
    },
    // 处理小数点函数
    _handleDecimalPoint() {
      // 如果包含小数点，直接返回
      if (this.money.indexOf('.') > -1) return false
      // 如果小数点是第一位，补0
      if (!this.money.length) { this.money = '0.' }
      // 如果不是，添加一个小数点
      else { this.money = this.money + '.' }

      this.$emit('changeNum', this.money)
    },
    // 处理删除键
    _handleDeleteKey() {
      const S = this.money
      // 如果没有输入，直接返回
      if (!S.length) return false
      // 否则删除最后一个
      this.money = S.substring(0, S.length - 1)
      this.$emit('changeNum', this.money)
    },
    // 处理清空键
    _handleClearKey() {
      this.money = ''
      this.$emit('changeNum', this.money)
    },
    // 确认付款
    _handleConfirmKey() {
      let S = this.money
      // 未输入
      if (!S.length) {
        alert('您目前未输入!')
        return false
      }
      // 将 8. 这种转换成 8.00
      if (S.indexOf('.') > -1 && S.indexOf('.') == (S.length - 1)) { S = Number(S.substring(0, S.length - 1)).toFixed(2) }
      // 保留两位
      S = Number(S).toFixed(2)
      this.$emit('confirmEvent', S)
    },
    // 处理数字
    _handleNumberKey(num) {
      const S = this.money
      // 如果有小数点且小数点位数不小于2
      if (S.indexOf('.') > -1 && S.substring(S.indexOf('.') + 1).length < 2) { this.money = S + num }
      // 没有小数点
      if (!(S.indexOf('.') > -1)) {
        // 如果第一位是0，只能输入小数点
        if (num === 0 && S.length === 0) {
          this.money = '0.'
        } else {
          if (S.length && Number(S.charAt(0)) === 0) return
          this.money = S + num
        }
      }
      this.$emit('changeNum', this.money)
    }
  }
}
</script>

<style lang="scss" scoped>
// 数字键盘
.keyboard{
  background: $colorF5;
  margin: 0 25px;
  position: relative;
  font-size: 36px;
  padding-top: 20px;
  .key-row{
    display: flex;
    justify-content: space-between;
    justify-items: center;
    margin-bottom:16px ;
    .key-cell{
      width: calc(25% - 12px);
      text-align: center;
      color: $black;
      line-height: 100px;
      background: $colorF;
      border-radius: 8px;
      span{
        display: inline-block;
        width: 40px;
        height: 32px;
      }
    }
    .double-cell{
      width: calc(50% - 8px);
    }
  }
  .key-confirm{
    position: absolute;
    @include bg-primary;
    height: 332px;
    line-height: 332px;
    width:calc(25% - 12px);
    color: $colorF;
    border-radius: 8px;
    bottom: 0;
    right: 0;
    text-align: center;
  }
}
</style>
